// withRouter是react-router-dom中内置的一个高阶组件，高阶组件本质上是一个函数，主要用来向现有组件添加功能。
import {BrowserRouter, Switch, Route, Redirect} from "react-router-dom";

//首先导入CSSTransition动画
import { TransitionGroup, CSSTransition } from "react-transition-group"; 
/*
CSSTransition用来包裹Switch组件，为渲染组件提供动画支持。
TransitionGroup：用来包裹CSSTransition组件，对即将卸载的组件执行缓存操作，保证渲染的页面在进入过程中，原页面状态保留，从而保证开发者可以同时看到两个页面动画切换的状态。
*/ 
/*
BrowserRouter:代表路由切换过程中对应的切换方式。是基于浏览器URL模式进行切换。
Switch：用来完成对不同路由路径的选择管理。
Route：路由组件，用来完成路由的实例化。
*/ 
import React, { Component } from 'react'
//导入Routes数据
import Routes from "./routerConfig"; 

// 导入index.css
import "./index.css";

//Ract中的路由本质上是一个组件 
export default class index extends Component {
  /*
  exact:设置当前路由路径匹配时是否支持严格匹配。
  path:设置对应路由的路径
  绝对路由：路径是一个固定值
  动态路由：路径中含有参数，参数数据无法确定，此时可以实现多个路径对应同一个组件。
  模糊路由：路径中含有模糊词汇(*)此时路由会变成模糊路由。
  component:设置路由对应的组件实例
  */ 
  render() {
    return (
        <BrowserRouter>
            <Route children={(props)=>{
              const {location, history} = props;
              console.log(props);
              return (<TransitionGroup>
                <CSSTransition classNames={history.action == "POP" ? 'pop':'push'} timeout={500} key={location.pathname}>
                  <Switch location={location}>
                      {Routes.map((router, index)=>{
                        return this.createChildrenRoute(router, index);
                      })}
                  </Switch>
                </CSSTransition>
              </TransitionGroup>);
            }}/>
        </BrowserRouter>
    )
  }
  //定义函数完成普通路由的构建
  createBasicRoute(router, index){
      return <Route key={index} exact path={router.path} component={router.component}/>; 
  }
  //定义函数完成路由的构建，该路由包含当前路由对应的自己路由
  createChildrenRoute(router, index){
      //获取router对象中的路由信息
      const {path, component:Father, children} = router; 
      if(children){
        //需要返回一个含有子级路由的路由实例 
        return <Route key={index} path={path} children={()=>{
          return (<Father>
                <Switch>
                    {children.map((child, index1)=>{
                      return this.createChildrenRoute({...child, path:path+"/"+child.path}, `${index}-${index1}`);
                    })}
                    <Redirect from={path} to={path+"/"+children[0].path}></Redirect>
                </Switch>
            </Father>);
        }}/>;
      }else{
        //返回一个普通的路由实例
        return this.createBasicRoute(router, index); 
      }
  }  
}
